<template>
  <div id="cinemaList">
    <vindex></vindex>
    <ul class="cLCenter">
      <li v-for="items in cinemaList" @click="showInfo($event)">
        <p class="cLArea">
          {{items.name}} （{{items.length}}家）
          <span>↓</span>
        </p>
        <ul class="hidden">
          <li class="cLLocation" v-for="item in items">
            <router-link :to="'cinema/'+item.id">
              <p>{{item.nm}}</p>
              <p>{{item.addr}}</p>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import vindex from '../layouts/index.vue'
import filmer from '../filmer'
import $ from 'jquery'
export default {
  data() {
    return {
      cinemaName: [],
      cinemaList: []
    }
  },
  components: {
    vindex
  },
  methods: {
    showInfo: function(e) {
      var cinemaInfo = $(e.target).siblings('ul')
      var arrow = $(e.target).find('span')
      if (cinemaInfo.hasClass('hidden')) {
        cinemaInfo.removeClass('hidden')
        console.log(arrow);

        arrow.html("↑")
      }
      else {
        console.log(arrow);
        cinemaInfo.addClass('hidden')
        arrow.html("↓")
      }
    },
    init: function() {
      this.appendList();
    },
    appendList: function() {
      var that = this;
      filmer.getCinemaList(function(data) {
        for (var i in data.data) {
          that.cinemaName.push(i);//地区名
          that.cinemaList.push(data.data[i]);//影院数据
        }
        //把获取到的地区名循环放到name里
        for (var i = 0; i < that.cinemaList.length; i++) {
          that.cinemaList[i].name = that.cinemaName[i];
        }
        console.log(that.cinemaName)
        console.log(that.cinemaList)
      })
    }
  },
  created: function() {
    this.init();
  }
}
</script>

<style scoped>
#cinemaList>.cLCenter {
  top: 227%;
  position: absolute;
  width: 100%;
}

#cinemaList>.cLCenter>li>.cLArea {
  width: 100%;
  background-color: #fff;
  padding: 0 1rem;
  height: 4rem;
  line-height: 4rem;
  margin-bottom: 0;
  border-top: 1px solid #aaa;
  font-size: 1.6rem;
}

#cinemaList>.cLCenter>li>.cLArea>span {
  float: right;
  color: tomato;
  line-height: 4rem;
}

#cinemaList ul>.cLLocation {
  padding: 0.5rem 1rem;
  border-top: 1px solid #aaa;
}

#cinemaList ul>.cLLocation>a>p:first-child {
  font-size: 1.5rem;
  color: #000;
}

#cinemaList ul>.cLLocation>a>p:last-child {
  font-size: 1.1rem;
  color: #999;
}
</style>
